<!-- @format -->

<template>
  <el-popover :append-to-body="false" class="hideCol" placement="bottom-end" title="隐藏表格字段" trigger="manual" v-model="visiblePop">
    <div class="check-columns">
      <div v-for="(t, index) in tableData" :key="index" class="check-columns-child">
        <el-checkbox size="mini" border v-model="t.show" checked :disabled="!!t.column">
          {{ t.label }}
        </el-checkbox>
        <div v-for="(c, index) in t.column" :key="index + 'child'" class="check-columns-child">
          <el-checkbox class="check-child" size="mini" :disabled="!!c.column" border v-model="c.show" checked @change="subChange">
            {{ c.label }}
          </el-checkbox>
          <el-checkbox class="check-child" size="mini" border v-model="s.show" v-for="(s, index) in c.column" :key="index + 'childs'" checked @change="subChange">
            {{ s.label }}
          </el-checkbox>
        </div>
      </div>
    </div>
    <div>
      <!-- <el-button size="small" type="primary" style="height: 50px;" @click="handleSelectAll">全选(全部显示)</el-button> -->
    </div>
    <i style="color:#449FE3" class="el-icon-circle-plus-outline" @click="visiblePop = !visiblePop" slot="reference"></i>
    <!-- <el-button style="height:20px;fontSize:8px;padding:0 5px" type="primary" size="mini" @click="visiblePop = !visiblePop" slot="reference">筛选</el-button> -->
  </el-popover>
</template>

<script>
export default {
  name: 'hidenColumns',
  props: {
    tableData: {
      type: Array,
    },
  },
    data() {
    return {
      visiblePop:false,
      // tableDataNew: [],
      // tableData: [],
      // totalData: {},
      // isTotal: false,
    };
  },
  methods: {
    // 限制最少显示为8个
    handleChange() {
      const list = this.tableData.map(item => item.show);
      const filterList = list.filter(item => item);
      this.tableData.forEach((item, index) => {
        item.disabled = filterList.length <= 5 && item.show;
      });
    },
    // 全选
    handleSelectAll() {
      this.tableData.forEach((item, index) => {
        item.show = true;
        item.disabled = false;
      });
    },
    subChange() {
      this.$emit('subChange');
    },
  },
};
</script>

<style scoped>
.check-columns {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}
.check-columns-child {
  display: flex;
  max-width: 300px;
  flex-wrap: wrap;
}
.check-columns-child .is-disabled:nth-child(1) {
  flex-basis: 93%;
  width: 150px;
}
.check-columns-child .el-checkbox {
  min-width: 45%;
  margin: 5px 5px !important;
  display: inline-block;
}
.el-button.is-circle {
  border-radius: 50% !important;
  color: #fff;
  background: transparent;
  border: none;
  font-size: 18px;
}
</style>
